<template>
	<view class="container">
		<view class="content">
			<header-view></header-view>
			<view class="title">忘记密码</view>
			<view class="tips">
				<view>请输入您的电子邮箱以接受您的密码重置说明</view>
			</view>
			<view class="form">
				<view class="form_item">
					<view class="form_title">
						邮箱
					</view>
					<view class="input_box flex">
						<input type="text" v-model="form.email" style="flex:1" maxlength="20" />
					</view>
				</view>
				<view class="fixed">
					<view class="done btn flex_between" @tap="toReset">
						<text>发送验证码</text>
						<uni-icons type="arrow-right" color="#fff" size="24"></uni-icons>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import headerView from "@/components/headerView.vue"
	import {
		sendEmail
	} from '@/api/api.js'
	export default {
		components: {
			headerView
		},
		data() {
			return {
				code: "",
				form: {
					email: '',
					event: 'findpwd'
				},
				time: 60000,
				timer: null,
				isTime: false
			};
		},
		onLoad() {},
		methods: {
			toReset() {
				// 存储邮箱参数
				uni.setStorageSync('resetEmail', this.form.email);

				sendEmail(this.form).then(res => {
					if (res.code == 0) {
						uni.showToast({
							title: res.data.msg,
							icon: "none",
						})
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: "none",
							success: () => {
								setTimeout(() => {
									uni.navigateTo({
										url: "/pages/login/reset"
									})
								}, 500)
							}
						})
					}
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		height: auto;

		.content {
			padding-bottom: 40rpx;
			// position: relative;
			padding-right: 0;

			.title {
				padding-top: 60rpx;
				font-size: 30px;
				font-weight: 500;
				font-family: PM;
				line-height: 92rpx;
			}

			.tips {
				opacity: .5;
				margin-top: 20rpx;
			}

			.form {
				margin-top: 50rpx;

				.form_item {
					padding: 40rpx 40rpx 0 0;

					.form_title {
						font-family: PM;
						opacity: .8;
						line-height: 42rpx;
					}

					.input_box {
						width: 100%;
						margin-top: 20rpx;
						background-color: hsla(0, 0%, 92.9%, .46);
						border-radius: 20rpx;
						font-size: 30rpx;
						padding: 0 40rpx;
						height: 98rpx;
						line-height: 98rpx;
						border: 4rpx solid #3d3d3d;
						font-weight: 600;
						font-family: PM;
					}
				}

				.fixed {
					.btn {
						height: 100rpx;
						line-height: 100rpx;
						color: #fff;
						font-size: 32rpx;
						padding: 0 40rpx;
						border-radius: 20rpx;
						background-image: url("../../static/img/btn_bg.png");
						background-size: cover;
						background-repeat: no-repeat;
						overflow: hidden;
						position: absolute;
						right: 0;
						left: 0;
						bottom: 10vh;
					}

					.done {
						background-color: #0065ff;
						margin-left: 80rpx;
						// margin-top: 8vh;
						border-radius: 20rpx 0 0 20rpx;
					}
				}
			}
		}
	}
</style>